<template>
  <div class="container" >
    <h1 style="text-align: center;"> 路由示例 </h1>
    <div class="top">  
      <router-link to="/demo/demo1">demo1</router-link>

      <router-link to="/demo/demo2">demo2</router-link>

      <router-link to="/demo/demo3?id=100">demo3</router-link>

      <!-- 
        <div  v-for="(item,index) in menus">
        <router-link  :to="item.link">{{item.label}}</router-link>
      </div>
    
    -->


    </div>  
    <div class="main">

      <router-view></router-view> 
    </div>  
  </div>
</template>


<script>  
export default {
  components: {
  },
    


  data() {
    return {
        menus:[
          {link:'/demo/demo1',label:'demo1'},
          {link:'/demo/demo2',label:'demo3'},
          {link:'/demo/demo3',label:'demo3'}
        ]
    }
  },
  methods: {
  
  }
}
</script>
 
<style>
  .container{
      height: 600px;
  }
  .top{ 
    height: 20%;
    background-color: rgb(219, 207, 207); 
  }

  .main{ 
    height: 80%;
    flex-direction: column;
    border-color: black;
    border: 1px; 
  }  

</style>